<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
			margin: 0;padding: 0;
			list-style: none;
		}
		#main {
			width: 100%;height: 260px;
			display: flex;
			justify-content: center;
		}
		#main ul li {
			width: 200px;height: 260px;
			float: left;
			position: relative;
		}
		#main ul li div {
			width: 100%;height: 260px;
		}
		#main ul li div.des {
			position: absolute;
			left: 0;top: 0;
			background: rgba(0,0,0,.3);
		}
		#main ul li div.des h4 {
			padding: 30px;margin: 0 auto;
			color: #FFF;
			font-size: 30px;
			width: 30px;
		}
    </style>
</head>
<body>
    <div id="main">
		<ul>
			<li>
				<div class="des"><h4>园林酒店</h4></div>
				<div style="background: url(img/1.jpg) center;"></div>
			</li>
			<li>
				<div class="des"><h4>设计师酒店</h4></div>
				<div style="background: url(img/2.jpg) center;"></div>
			</li>
			<li>
				<div class="des"><h4>青年旅社</h4></div>
				<div style="background: url(img/3.jpg) center;"></div>
			</li>
			<li>
				<div class="des"><h4>特色客栈</h4></div>
				<div style="background: url(img/4.jpg) center;"></div>
			</li>
			<li>
				<div class="des"><h4>海岛酒店</h4></div>
				<div style="background: url(img/5.jpg) center;"></div>
			</li>
			<li>
				<div class="des"><h4>海外温泉</h4></div>
				<div style="background: url(img/6.jpg) center;"></div>
			</li>
		</ul>
	</div>
</body>
<script src="../jquery.js"></script>
<script>
    $("#main").find("li").mouseenter(function(){
        $(this).stop().animate({
            width:400
        })
        .children(".des").stop().hide()
        .parent()
        .siblings().stop().animate({
            width:160
        });
		// 注意jq的连缀操作中，DOM选择器的位置
    }).mouseleave(function(){
        $("#main").find("li").stop().animate({
            width:200
        });
        
        $(this).children(".des").stop().show();
    })
</script>
</html>